<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>密码修改</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<!--图表插件-->
		<link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
		<script type="text/javascript" src="layui/layui/layui.js"></script>
		<script type="text/javascript" src="js/Chart.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
		<script src="js/ServerUrl.js"></script>
		<script type="text/javascript">
			$(function() {
				// 	console.log(storage.getItem("username"));
				if (Cookies.get('islogin')) {
					$("#id").attr("value", Cookies.get('id'));
				}
			});

			function submitPassword() {
				var id = $("#id").val();
				var oldpassword = $("#oldpassword").val();
				var newpassword = $("#newpassword").val();
				var confirmpassword = $("#confirmpassword").val();
				if (oldpassword == "" || newpassword == "" || confirmpassword == "") {
					return;
				}
				if (oldpassword != Cookies.get('password')) {
					layer.msg("旧密码不正确，请重试");
					return;
				}
				if (newpassword != confirmpassword) {
					layer.msg("新密码与确认密码不一致，请检查");
					return;
				}
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/submitPassword",
					data: {
						"id": id,
						"newpassword": newpassword
					},
					success: function(result) {
						// console.log(result);
						if (result.status == 200) {
							layer.msg('修改密码成功');
							if (Cookies.get('islogin') == "true" && Cookies.get('expires') == "3") {
								Cookies.set('password', newpassword, {
									expires: 3
								});
							} else if (Cookies.get('islogin') == "true" && Cookies.get('expires') == "temp") {
								Cookies.set('password', newpassword);
							}
						} else if (result.status == 404) {
							layer.msg('修改失败');
						}
					},
					error: function() {
						layer.msg('提交修改时异常');
					}
				});
			}
		</script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">
							<form action="#!" method="post" onsubmit="return false" class="site-form">
								<input id="id" type="hidden">
								<div class="form-group">
									<label for="old-password">旧密码</label>
									<input required="required" type="password" class="form-control" name="oldpassword"
										id="oldpassword" placeholder="输入旧密码">
								</div>

								<div class="form-group">
									<label for="new-password">新密码</label>
									<input required="required" type="password" class="form-control" name="newpassword"
										id="newpassword" placeholder="输入新的密码">
								</div>
								<div class="form-group">
									<label for="confirm-password">确认新密码</label>
									<input required="required" type="password" class="form-control"
										name="confirmpassword" id="confirmpassword" placeholder="确认新密码">
								</div>
								<div class="form-group">
									<a class="btn btn-xs btn-info"><i class="mdi mdi-eye-off" onclick="showhide()"
											id="eye"></i></a>
								</div>
								<script type="text/javascript">
									var eye = document.getElementById("eye");
									var oldpassword = document.getElementById("oldpassword");
									var newpassword = document.getElementById("newpassword");
									var confirmpassword = document.getElementById("confirmpassword");

									function showhide() {
										if (oldpassword.type == "password") {
											oldpassword.type = "text";
											newpassword.type = "text";
											confirmpassword.type = "text";
											eye.setAttribute('class', 'mdi mdi-eye');
										} else {
											oldpassword.type = "password";
											newpassword.type = "password";
											confirmpassword.type = "password";
											eye.setAttribute('class', 'mdi mdi-eye-off');
										}
									}
								</script>
								<button onclick="submitPassword()" class="btn btn-primary">修改密码</button>
							</form>

						</div>
					</div>
				</div>

			</div>

		</div>
	</body>
</html>
